$(document).ready(function(){
	$(document).on("click", "#watchList img.addToWatchList", function(){
		updateWatchList('add');
	});
	
	$(document).on("click", "#watchList img.removeFromWatchList", function(){
		updateWatchList('edit');
	});
	
	$(document).on("mouseover", "#watchList img.removeFromWatchList", function(){
		var src = $(this).attr('src');
		$(this).attr('src', src.replace('_off', '_on'));
	});
	
	$(document).on("mouseout", "#watchList img.removeFromWatchList", function(){
		var src = $(this).attr('src');
		$(this).attr('src', src.replace('_on', '_off'));
	});
	
	$(document).on("mouseover", "#watchList img.addToWatchList", function(){
		var src = $(this).attr('src');
		$(this).attr('src', src.replace('_off', '_on'));
	});
	
	$(document).on("mouseout", "#watchList img.addToWatchList", function(){
		var src = $(this).attr('src');
		$(this).attr('src', src.replace('_on', '_off'));
	});
	
	function updateWatchList(action){
		var dataId = '';
		var watchListId = '';
		var url = addWatchListUrl;
		dataId = $('#teacherWatchList').val();
		if(action == 'edit'){
			watchListId = $('#watchListData').val();
			url = updateWatchListUrl;
		}
		$.ajax({
			url : url,
			dataType : 'html',
			data : {data_id : dataId, watchlist_id : watchListId},
			success: function(data){
				if(data == loginUrl){
					window.location = data;
				}else{
					$('#watchList').html(data);
				}
			},
			beforeSend: function(){
				$(this).attr('disabled', 'disabled');
			},
			complete: function(){
				$(this).removeAttr('disabled');
			}
			
		});
	}
});